<template>
	<view class="xsdd_content">
		<!-- 头部 -->
		<view class="xsdd_header">
            <view class="xsdd_header_top">
				<uni-row class="form_row">
					<uni-col class="form_item" :span="12">
						<view>起始时间：</view>
						<uni-datetime-picker type="date" v-model="formData.dates" />
					</uni-col>
					<uni-col class="form_item" :span="12">
						<view style="margin: 0 10rpx; color: #a7a7a7;" >到</view>
						<view>截止时间：</view>
						<uni-datetime-picker type="date" v-model="formData.datee" />
					</uni-col>
				</uni-row> 
					
				<uni-row class="form_row">
					<uni-col class="form_item" :span="18">
						<view>单号：</view>
						<input style="flex: 1;" type="text" v-model="formData.search" placeholder="请输入单号" />
					</uni-col>
					
					<uni-col class="form_item" :span="6">
						<button hover-class="hover_btn" @click="handelSearch">查询</button>
					</uni-col>
				</uni-row>
			</view>

			<view class="header_amount">
				<view style="width: 50%;">
					<uni-segmented-control :current="current" :values="tapList"
						active-color="#f9a94d" @clickItem="onClickItem" />
				</view>
			</view>
		</view>
		<!--  -->

		<view class="xsdd_list">
			<scroll-view v-if="current==0" style="height: 100%;" scroll-y="true" @scrolltolower="onScrolltolower">
				<view class="xsdd_item" v-for="(item, index) in list" :key="index" @click="goPages(item)">
					<view class="left_info">
						<view class="info_row" style="">
							<view style="width: 40%;">单号：{{ item.dh || 0 }}</view>
							<view style="width: 60%;">客户：{{ item.khidname || '' }}</view>
						</view>
						<view class="info_row">
							<view class="info_item" style="width: 25%;" >数量：{{ item.sl_sum || 0 }}</view>
							<view class="info_item" style="width: 25%;">优惠金额：{{ item.yhje || 0 }}</view>
							<view class="info_item" style="width: 50%;">制单日期：{{ item.zhdate.slice(0, 10) || '' }}</view>
						</view>
						<view class="info_row">
							<view class="info_item" style="width: 25%;">订单金额：{{ item.sl_sum || 0 }}</view>
							<view class="info_item" style="width: 25%;">付款金额：{{ item.fkje || 0 }}</view>
							<view class="info_item" style="width: 50%;">结余金额：{{ item.je_sum || 0 }}</view>
						</view>
					</view>

					<!-- <view class="right_info">
						<view style="color: #fb1904;">{{ item.statename || '' }}</view>
						<view style="color: #ffa035;">￥ {{ item.fkje || 0 }}</view>
					</view> -->
				</view>
			</scroll-view>

			<!--  -->

			<scroll-view v-if="current==1" style="height: 100%;" scroll-y="true" @scrolltolower="onScrolltolower">
				<view class="xsdd_item" v-for="(item, index) in list" :key="index" @click="goPages(item)">
					<view class="left_info">
						<view class="info_row" style="">
							<view style="width: 40%;">单号：{{ item.dh || 0 }}</view>
							<view style="width: 60%;">客户：{{ item.khidname || '' }}</view>
						</view>
						<view class="info_row">
							<view class="info_item" style="width: 25%;" >数量：{{ item.sl_sum || 0 }}</view>
							<view class="info_item" style="width: 25%;">优惠金额：{{ item.yhje || 0 }}</view>
							<view class="info_item" style="width: 50%;">制单日期：{{ item.zhdate.slice(0, 10) || '' }}</view>
						</view>
						<view class="info_row">
							<view class="info_item" style="width: 25%;">订单金额：{{ item.sl_sum || 0 }}</view>
							<view class="info_item" style="width: 25%;">付款金额：{{ item.fkje || 0 }}</view>
							<view class="info_item" style="width: 50%;">结余金额：{{ item.yhje || 0 }}</view>
						</view>
					</view>

					<view class="right_info">
						<view style="color: #fb1904;">已审核未发货数量：{{ item.statename || '' }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import customHeader from "@/components/custom-header/custom-header.vue";
import utils from "@/utils/utils.js";
import GetDate from "@/utils/date.js";
import Http from '@/service/api'
	export default {
		components: {
			customHeader,
        
		},
		data() {
			return {
				form: {},
				filtrList: [
                    { value: '全部', text: "全部" },
                    { value: '已审核', text: "已审核" },
                    { value: '未审核', text: "未审核" },
                ],
				amountList: [
					{ name: '订单金额', sl: '￥ 0' },
					{ name: '订单数量', sl: 0 },
					{ name: '订单必输', sl: 0 },
				],
				list: [], 
				formData: {
				},
				page: 1,
				size: 20,
				showLower: false, // 是否触底加载更多

				current: 0,
				tapList: ['已发货', '未发货']
			}
		},
        computed: {},
		onLoad() {
			let today = GetDate.getToday().time

			this.formData.dates = today.slice(0, 8) + '01'
			this.formData.datee = today
			// this.formData.datetimerange = [this.formData.dates, today]

			console.log('== 11 ', GetDate.getToday().time)
			console.log('== formData ', this.formData)
			this.orderClothingOrderDd()
		},
		methods: {
			orderClothingOrderDd() {
				const { dates, datee, search, searchstate } = this.formData
				let param = {
					dates,
					datee,
					search,
					// searchstate,
					searchstate: this.tapList[this.current],
					page: this.page,
					size: this.size
				}
				console.log('== param ', param)
				console.log('== this.current ', this.current)
				Http.orderClothingOrderDd(param).then(r => {
					console.log('== r ', r)
					// this.amountList = [
					// 	{ name: '订单金额', sl: '￥ ' + r.ddzje },
					// 	{ name: '订单数量', sl: r.ddzsl },
					// 	{ name: '订单必输', sl: r.ddcount },
					// ]

					let data = r.detail
					if (!data.length && this.showLower) {
                        uni.showToast({
                            title:'数据加载完毕',
                            icon:'none',
                            duration:3000  
                        })
                        this.page--;
                        return
                    }

					if (this.showLower) {
                        this.list = this.list.concat(data)
                    } else {
                        this.list = data
                    }

				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
			},
			onScrolltolower() {
				this.page++
				this.showLower = true
                console.log('== 加载跟多  ', this.page)
                this.orderClothingOrderDd()
			},
            handleGoPages(item) {
				console.log('== item ', item)
				if (!!item.isScan) {

				} else if (!!item.path) {
					uni.navigateTo({
						url: `${item.path}?param=${item.param}`
					})
				}
			},

			handelSearch() {
				console.log('== 11 formData ', this.formData)
				this.showLower = false
				this.page = 1
				this.orderClothingOrderDd()
			},
			goPages(item) {
				uni.navigateTo({
					url: `./xsddDetail`
				})
			},
			changeTimer(e) {
				this.formData.dates = e[0].slice(0, 10)
				this.formData.datee = e[1].slice(0, 10)
			},

			onClickItem(e) {
				this.current = e.currentIndex
				this.showLower = false
				this.page = 1
				this.orderClothingOrderDd()
			}
			
		}
	}
</script>

<style lang="less" scoped>
.xsdd_content {
    height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 16rpx;

	.xsdd_header {
		width: 100%;
		padding: 15rpx 10rpx;
		box-sizing: border-box;
		
		.xsdd_header_top {
			// display: flex;
			// align-items: center;
			// border-bottom: 2rpx dashed #cbcbcb;
			// padding-bottom: 10rpx;

			.form_row {
				width: 100%;
				display: flex;
				align-items: center;


				.form_item {
					display: flex;
					align-items: center;
					padding-bottom: 20rpx;

					button {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 120rpx;
						height: 40rpx;
						background: #f9a94d;
						color: #fff;
						margin: 0;
						margin-left: 10rpx;
					}
					
					.hover_btn {
						background: #da9444;
					}
				}
				
			}
		}

		.work_left {
			flex: 1;
			display: flex;
			align-items: center;

			.work_item {
				margin-right: 20rpx;
			}
		}

		.header_amount {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.xsdd_list {
		flex: 1;
		overflow: auto;
		background: #f5f5f5;
		padding-top: 10rpx;
		padding-left: 5rpx;

		.xsdd_item {
			padding: 10rpx;
			background: #fff;
			display: flex;
			margin-bottom: 10rpx;

			

			.left_info {
				flex: 1;
				overflow: hidden;

				.info_row {
					display: flex;
					align-items: center;
					white-space: nowrap;   
					padding-bottom: 10rpx;

					.remark_el {
						white-space: nowrap;           /* 不换行 */
						overflow: hidden;              /* 隐藏超出的文本 */
						text-overflow: ellipsis;       /* 超出的部分显示省略号 */
					}
				}
			}

			.right_info {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
			}

		}

		
	}
}
</style>
